<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div th:include="include :: footer"></div>
<!--<script th:src="@{/highchair/highchairs.js}"></script>-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script language="JavaScript">
    var chart;
    var prefix = "/blog/wine"
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '红酒质量占有比例'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'red'
                        }
                    }, showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '所占比例'
            }],
        });
        getPieJson();
    });

    function getPieJson() {
        var data1 = [];
        $.ajax({
            type: "POST", // 提交方式
            url: prefix + '/pieChart',
            success: function (result) {
                console.log(result);
                $('#container').show();
                for (var key in result) {
                    //通过遍历对象属性的方法，遍历键值对，获得key，然后通过 对象[key]获得对应的值
                    if (result.hasOwnProperty(key)) {
                        data1.push([key, result[key]]);
                    }
                }
                chart.series[0].setData(data1);
            }
        });
    }
</script>
</body>

</html>
